<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计 - 垃圾分类系统</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .content {
            padding: 30px;
        }

        .back-btn {
            display: inline-block;
            background: #6c757d;
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 5px;
            margin-bottom: 30px;
            transition: all 0.3s;
        }

        .back-btn:hover {
            background: #5a6268;
            text-decoration: none;
            color: white;
        }

        .stats-overview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .stat-card h3 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .stat-card p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .charts-section {
            margin-bottom: 40px;
        }

        .charts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .chart-container {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .chart-title {
            font-size: 1.3em;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            color: #333;
        }

        .chart-canvas {
            max-height: 300px;
        }

        .time-filter {
            text-align: center;
            margin-bottom: 30px;
        }

        .filter-btn {
            background: #f8f9fa;
            border: 2px solid #dee2e6;
            color: #495057;
            padding: 10px 20px;
            margin: 0 5px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .filter-btn.active {
            background: #4CAF50;
            border-color: #4CAF50;
            color: white;
        }

        .filter-btn:hover {
            background: #e9ecef;
        }

        .filter-btn.active:hover {
            background: #45a049;
        }

        .export-section {
            text-align: center;
            margin-top: 40px;
            padding: 30px;
            background: #f8f9fa;
            border-radius: 10px;
        }

        .export-btn {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            border: none;
            padding: 12px 25px;
            margin: 0 10px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .export-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
        }

        .user-ranking {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
        }

        .ranking-title {
            font-size: 1.3em;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            color: #333;
        }

        .ranking-list {
            list-style: none;
        }

        .ranking-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #e9ecef;
            transition: background 0.3s;
        }

        .ranking-item:hover {
            background: #f8f9fa;
        }

        .ranking-item:last-child {
            border-bottom: none;
        }

        .ranking-position {
            font-weight: bold;
            color: #4CAF50;
            min-width: 30px;
        }

        .ranking-user {
            flex: 1;
            margin-left: 15px;
        }

        .ranking-score {
            font-weight: bold;
            color: #666;
        }

        @media (max-width: 768px) {
            .charts-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-overview {
                grid-template-columns: 1fr;
            }
            
            .filter-btn {
                display: block;
                margin: 5px 0;
                width: 100%;
            }
            
            .export-btn {
                display: block;
                margin: 10px 0;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>数据统计与分析</h1>
            <p>系统使用情况一览</p>
        </div>

        <div class="content">
            <a href="{{ url_for('index') }}" class="back-btn">← 返回首页</a>
            
            <div class="time-filter">
                <button class="filter-btn active" onclick="changeTimeRange('7')">最近7天</button>
                <button class="filter-btn" onclick="changeTimeRange('30')">最近30天</button>
                <button class="filter-btn" onclick="changeTimeRange('90')">最近90天</button>
                <button class="filter-btn" onclick="changeTimeRange('all')">全部时间</button>
            </div>

            <div class="stats-overview">
                <div class="stat-card">
                    <h3>{{ system_stats.total_users }}</h3>
                    <p>总用户数</p>
                </div>
                <div class="stat-card">
                    <h3>{{ system_stats.total_predictions }}</h3>
                    <p>总识别次数</p>
                </div>
                <div class="stat-card">
                    <h3>{{ system_stats.active_users_today }}</h3>
                    <p>今日活跃用户</p>
                </div>
                <div class="stat-card">
                    <h3>{{ "%.1f" | format(system_stats.average_accuracy * 100) }}%</h3>
                    <p>平均准确率</p>
                </div>
            </div>

            <div class="charts-section">
                <div class="charts-grid">
                    <div class="chart-container">
                        <div class="chart-title">垃圾类型分布</div>
                        <canvas id="categoryChart" class="chart-canvas"></canvas>
                    </div>
                    
                    <div class="chart-container">
                        <div class="chart-title">每日识别趋势</div>
                        <canvas id="dailyTrendChart" class="chart-canvas"></canvas>
                    </div>
                    
                    <div class="chart-container">
                        <div class="chart-title">用户活跃度</div>
                        <canvas id="userActivityChart" class="chart-canvas"></canvas>
                    </div>
                    
                    <div class="chart-container">
                        <div class="chart-title">准确率分布</div>
                        <canvas id="accuracyChart" class="chart-canvas"></canvas>
                    </div>
                </div>
            </div>

            <div class="user-ranking">
                <div class="ranking-title">用户排行榜 - 识别次数</div>
                <ul class="ranking-list">
                    {% for user in top_users %}
                    <li class="ranking-item">
                        <span class="ranking-position">{{ loop.index }}</span>
                        <span class="ranking-user">{{ user.username }}</span>
                        <span class="ranking-score">{{ user.total_predictions }} 次</span>
                    </li>
                    {% endfor %}
                    
                    {% if not top_users %}
                    <li class="ranking-item">
                        <span>暂无数据</span>
                    </li>
                    {% endif %}
                </ul>
            </div>

            <div class="export-section">
                <h3>导出报表</h3>
                <p>将统计数据导出为文件，便于进一步分析</p>
                <br>
                <button class="export-btn" onclick="exportData('excel')">导出 Excel</button>
                <button class="export-btn" onclick="exportData('pdf')">导出 PDF</button>
            </div>
        </div>
    </div>

    <script>
        // 图表数据（从后端传递）
        const chartData = {
            categories: {{ category_stats | tojson }},
            dailyTrend: {{ daily_trend | tojson }},
            userActivity: {{ user_activity | tojson }},
            accuracy: {{ accuracy_distribution | tojson }}
        };

        // 垃圾类型分布饼图
        const categoryCtx = document.getElementById('categoryChart').getContext('2d');
        new Chart(categoryCtx, {
            type: 'doughnut',
            data: {
                labels: chartData.categories.map(item => item.category),
                datasets: [{
                    data: chartData.categories.map(item => item.count),
                    backgroundColor: [
                        '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD'
                    ],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // 每日识别趋势线图
        const dailyCtx = document.getElementById('dailyTrendChart').getContext('2d');
        new Chart(dailyCtx, {
            type: 'line',
            data: {
                labels: chartData.dailyTrend.map(item => item.date),
                datasets: [{
                    label: '识别次数',
                    data: chartData.dailyTrend.map(item => item.count),
                    borderColor: '#4CAF50',
                    backgroundColor: 'rgba(76, 175, 80, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // 用户活跃度柱状图
        const activityCtx = document.getElementById('userActivityChart').getContext('2d');
        new Chart(activityCtx, {
            type: 'bar',
            data: {
                labels: chartData.userActivity.map(item => item.hour + ':00'),
                datasets: [{
                    label: '活跃用户数',
                    data: chartData.userActivity.map(item => item.count),
                    backgroundColor: 'rgba(54, 162, 235, 0.8)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // 准确率分布柱状图
        const accuracyCtx = document.getElementById('accuracyChart').getContext('2d');
        new Chart(accuracyCtx, {
            type: 'bar',
            data: {
                labels: ['0-20%', '21-40%', '41-60%', '61-80%', '81-100%'],
                datasets: [{
                    label: '用户数量',
                    data: chartData.accuracy,
                    backgroundColor: [
                        '#FF6B6B', '#FFA726', '#FFEE58', '#66BB6A', '#4CAF50'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        function changeTimeRange(range) {
            const buttons = document.querySelectorAll('.filter-btn');
            buttons.forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');
            
            // 这里可以添加重新加载数据的逻辑
            console.log('切换时间范围:', range);
        }

        function exportData(format) {
            const url = `/statistics/export?format=${format}`;
            window.open(url, '_blank');
        }
    </script>
</body>
</html>